<template>
  <MusicList
    :songs="songs"
    :pic="albums.pic"
    :title="albums.title"
    :loading="loading"
  ></MusicList>
</template>

<script>
import { ref } from 'vue'
import { getAlbum } from '@/services/recommend'
import { processSongs } from '@/services/song'
import storage from 'good-storage'
import MusicList from '@/components/music-list/music-list.vue'
export default {
  name: 'Albums',
  components: { MusicList },
  setup () {
    const loading = ref(true)
    const albums = storage.session.get('__singer__')
    const songs = ref([])
    getAlbum(albums)
      .then((res) => {
        return processSongs(res.songs)
      })
      .then((res) => {
        songs.value = res
        loading.value = false
      })
    return { songs, albums, loading }
  }
}
</script>

<style></style>
